page {
	background-color: #FFFFFF;
}

.zaiui-bar-search-title-box {
	.cu-bar {
		padding-top: var(--status-bar-height);
		min-height: calc(var(--status-bar-height) + 101rpx);
		.content {
			top: var(--status-bar-height);
			
			/* #ifndef MP */
			left: 18.18rpx;
			width: calc(100% - 127.27rpx);
			/* #endif */
			
			/* #ifdef MP */
			left: -140rpx;
			width: calc(100% - 300rpx);
			/* #endif */
			
			.search-form {
				display: inherit;
				flex: inherit;
				margin: 0;
				color: #717171;
				[class*="cuIcon-"] {
					margin: 0;
				}
				
				input {
					flex: 1;
					font-size: 28rpx;
					background: transparent;
					border: none;
					outline: none;
					padding: 0;
					margin: 0;
				}
				
				.placeholder-style {
					color: #999999;
					font-size: 28rpx;
				}
				
				.cuIcon-close {
					margin-left: 10rpx;
					padding: 5rpx;
					border-radius: 50%;
					background: #f0f0f0;
					&:active {
						background: #e0e0e0;
					}
				}
			}
		}
	}
	.cu-bar.fixed.no-shadow {
		box-shadow: inherit;
	}
	.cu-bar.bg-white {
		color: #333333;
	}
	.zaiui-seat-height {
		width: 100%;
		height: calc(var(--status-bar-height) + 101rpx);
	}
}

.VerticalNav.nav {
	width: 200upx;
	color: #666666;
	height: calc(100vh - (var(--status-bar-height) + 101rpx));
	white-space: initial;
}

.VerticalNav.nav .cu-item {
	width: 100%;
	text-align: center;
	background-color: #FAFAFA;
	margin: 0;
	border: none;
	height: 60px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10rpx;
}

.VerticalNav.nav .cu-item.cur {
	background-color: #FFFFFF;
	color: #e54d42;
	font-weight: bold;
}

.VerticalNav.nav .cu-item.cur::after {
	content: "";
	width: 8rpx;
	height: 40rpx;
	border-radius: 0px 10rpx 10rpx 0px;
	position: absolute;
	background-color: #e54d42;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}

.category-item {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	line-height: 1.4;
	text-align: center;
	word-break: break-all;
}

.VerticalBox {
	display: flex;
}

.VerticalMain {
	background-color: #FFFFFF;
	height: calc(100vh - (var(--status-bar-height) + 101rpx));
	flex: 1;
}

.zaiui-grid-icon-box {
	position: relative;
	width: 100%;
	.cu-list.grid {
		background-color: inherit;
		.grid-icon {
			margin: 0;
			.icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 16rpx;
				background: #f8f8f8;
				padding: 10rpx;
				box-sizing: border-box;
			}
		}
	}
	.cu-list.grid>.cu-item {
		padding-bottom: 20rpx;
		text {
			color: #333333;
			font-size: 24rpx;
			margin-top: 10rpx;
			display: block;
		}
	}
	.cu-list.grid.no-border {
	    padding: 0;
	}
	
	.sub-category-item {
		transition: all 0.3s ease;
		&:active {
			background-color: #f5f5f5;
			transform: scale(0.95);
		}
		
		.grid-icon {
			.icon {
				transition: all 0.3s ease;
			}
		}
		
		&:active .grid-icon .icon {
			transform: scale(1.1);
		}
	}
	
	// 热门分类特殊样式
	.hot-category {
		.grid-icon {
			position: relative;
			.hot-badge {
				position: absolute;
				top: -5rpx;
				right: -5rpx;
				background: #ff4444;
				color: white;
				border-radius: 50%;
				width: 24rpx;
				height: 24rpx;
				font-size: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid white;
				z-index: 2;
			}
		}
		
		&:active {
			background-color: #fff0f0;
		}
	}
	
	// 推荐分类特殊样式
	.recommend-category {
		.grid-icon {
			position: relative;
			.recommend-badge {
				position: absolute;
				top: -5rpx;
				right: -5rpx;
				background: #ff6b35;
				color: white;
				border-radius: 50%;
				width: 24rpx;
				height: 24rpx;
				font-size: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid white;
				z-index: 2;
			}
		}
		
		&:active {
			background-color: #fff8f0;
		}
		
		.text-xs {
			margin-top: 5rpx;
			line-height: 1.2;
			opacity: 0.8;
		}
	}
}
